<template>
  <div class="main">
    <div class="wrap">
      <canvas id="myCanvas" width="1080" height="2000" style="display:none;border: 2px solid grey"></canvas>
      <div id="qrcode" style="display:none"></div>
      <img class="recurit-jpg" src alt />
      <img ref="product" class="product" src alt />
      <!-- <van-loading class="loading" v-show="loading" type="spinner" /> -->
    </div>
    <!-- <img src="@/assets/images/activity/youhuifu/haibao.jpg" alt /> -->
    <!-- 分享弹窗 -->
    <div class="share" v-show="isShow" @click="off">
      <!-- <img class="share_img" src="@/assets/images/activity/youhuifu/share_icon.png" alt /> -->
      <div class="share_text">
        <p>点击右上方分享至</p>
        <p>好友或朋友圈</p>
      </div>
    </div>
    <!-- <div class="btn" @click="toshare">立即分享</div> -->
  </div>
</template>
<script>
import { baseUrl } from '@/config/env';
import QRCode from 'qrcodejs2';
import { imgBaseUrl } from '@/config/env';
// import { Field } from 'vant';
import weixin from '@/components/wx/wx.js';
// import wx from 'weixin-js-sdk';
// import { VanImagePreview } from 'vant/types/image-preview';
export default {
  data() {
    return {
      imgBaseUrl,
      content: '',
      isShow: false,
      nickName: '',
      url: '',
      images: [],
      title: '',
      subTitle: '',
      price: '',
      coin: '',
      oprice: ''
    };
  },
  // created() {
  //   this.geturl();
  //   this.$http.post('/tuser/userInfo', {}).then(res => {
  //     console.log(res);
  //     if (res.data.code === '0') {
  //       this.nickName = res.data.object.nickName;
  //     }
  //   });
  // },
  mounted() {
    this.$http.post('/tuser/userInfo', {}).then(res => {
      if (res.data.code === '0') {
        this.nickName = res.data.object.nickName;
      }
    });
    this.geturl();
  },
  methods: {
    qrcode(content) {
      // eslint-disable-next-line
      const qrcode = new QRCode('qrcode', {
        width: 75,
        height: 75, // 高度
        text: content // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
      const canvas = document.getElementById('myCanvas');
      const context = canvas.getContext('2d');
      const that = this;
      var img = new Image();
      img.src = require('../../assets/images/seckill/white.jpg');
      // img.src = that.imgBaseUrl + that.images[0];
      img.onload = function() {
        context.drawImage(this, 0, 0, 1080, 2000);
        context.font = '45px Arial';
        context.fillStyle = 'black';
        context.shadowBlur = 0;
        context.fillText(that.nickName, 600, 350);
        context.fillText('积分“邮”好礼，每周抢惊喜', 290, 190);
        context.fillStyle = '#ff91a8';
        context.moveTo(700, 1300);
        context.lineTo(850, 1300);
        context.lineTo(850, 1350);
        context.lineTo(700, 1350);
        context.lineTo(700, 1300);
        // 描边的直线并没有闭合成一个封闭的形状
        context.stroke();
        context.fill();
        context.fillStyle = 'white';
        context.font = '35px Arial';
        context.fillText('秒杀价', 725, 1340);
        context.fillStyle = 'black';
        context.font = '40px Arial';
        context.fillText(that.title, 200, 1200);
        context.fillStyle = '#9c9da1';
        context.font = '35px Arial';
        context.fillText(that.subTitle, 200, 1270);
        context.fillStyle = '#9c9da1';
        context.font = '35px Arial';
        context.fillText(that.oprice + '元', 500, 1340);
        context.fillStyle = '#fe5568';
        context.font = '45px Arial';
        context.fillText(
          that.price + '元' + '+' + that.coin + '积分',
          200,
          1340
        );
        context.moveTo(500, 1330);
        context.lineTo(600, 1330);
        context.stroke();
        context.moveTo(190, 1100);
        context.lineTo(190, 1400);
        context.lineTo(890, 1400);
        context.lineTo(890, 1100);
        context.lineWidth = 0.2;
        context.stroke();
        context.fillStyle = '#919191';
        context.font = '35px Arial';
        context.fillText('长按识别二维码', 450, 1530);
        context.fillText('直达购买！', 450, 1600);
        const img2 = new Image();
        img2.src = document.getElementsByTagName('img')[0].src;
        img2.onload = () => {
          context.drawImage(img2, 190, 1450, 220, 220);
          document.getElementsByTagName('img')[1].src = canvas.toDataURL(
            'image/png',
            1
          );
          that.loading = false;
        };
      };
      const img3 = new Image();
      img3.setAttribute('crossOrigin', 'anonymous');
      img3.src = that.imgBaseUrl + that.images[0];
      img3.setAttribute('crossOrigin', 'anonymous');
      img3.onload = () => {
        context.drawImage(img3, 190, 400, 700, 700);
        document.getElementsByTagName('img')[1].src = canvas.toDataURL(
          'image/png',
          1
        );
        that.loading = false;
      };
    },
    // 获取分享后跳转地址
    geturl() {
      this.$http
        .post('seckill/product', { id: this.$route.query.id.toString() })
        .then(res => {
          console.log(res);
          if (res.data.code === '0') {
            const data = res.data.object;
            this.images = data.pics.split(',');
            this.title = data.title;
            this.subTitle = data.subTitle;
            this.price = data.price;
            this.coin = data.coin;
            this.oprice = data.oPrice;
            this.qrcode('11111');
            this.initWxChat();
          }
        });
    },
    toshare() {
      this.isShow = true;
    },
    off() {
      this.isShow = false;
    },
    initWxChat: function() {
      const url = window.location.href.split('#')[0];
      const param = {
        title:
          '您的好友' + this.nickName + '邀请您办理邮储市民卡！（社会保障卡）！',
        desc: '领取缤纷好礼，邀请好友成功办卡并激活可获20-50积分。',
        link: baseUrl + this.url,
        imgUrl: 'http://img.580travel.com/youchu/king.jpg',
        localUrl: url,
        source: 'etc'
      };
      weixin.wxChat(this, param);
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 160px;
  background: #fff;
  :first-child {
    font-size: 34px;
    color: #6a6a6a;
  }
  :nth-child(2) {
    font-size: 30px;
    color: #313131;
  }
}
.text {
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 45px;
  letter-spacing: 5px;
  color: #ffffff;
  position: absolute;
  top: 180px;
}
.btn {
  margin: 50px auto;
  width: 690px;
  height: 88px;
  background-color: #fb6b48;
  border-radius: 8px;
  font-size: 32px;
  color: #ffffff;
  text-align: center;
  line-height: 88px;
}
.wrap {
  margin: 0 auto;
  // background-image: url('../../assets/image/recruit.jpg');
  // background-size: 100% 100%;
  position: relative;
  height: 100%;
  overflow: scroll;
  .recurit-jpg {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.share {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
  .share_img {
    width: 200px;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .share_text {
    position: absolute;
    top: 200px;
    right: 120px;
    color: #fff;
    font-size: 30px;
  }
}
</style>
